﻿@using PMS.Web.Models.Customers
@{
    ViewData["Title"] = "找回密码服务";
}
@model PasswordRecoveryModel
@section CssLinks{
    <link href="~/lib/PearAdminLayui/component/pear/css/pear.css" rel="stylesheet" />
}
@section CssStyles{
    <style type="text/css">
        .formitem-box{ 
            width: 380px;
            padding: 20px;
        }
        .formitem-box .layui-form-item {
            position: relative;
        }
        .formitem-box .layui-form-item .layui-input {
            padding-left: 38px;
        }
        .input-prefix-icon {
            position: absolute;
            left: 1px;
            top: 1px;
            width: 38px;
            line-height: 36px;
            text-align: center;
            color: #d2d2d2;
        }
        .codeImage {
            cursor: pointer;
            height: 38px;
            width: 130px;
        }
    </style>
}

<div class="pear-container">
    <div class="layui-card layui-form">
        <div class="layui-card-header">
            <h3>用户密码找回</h3>
        </div>
        <div class="layui-card-body">
            <div class="formitem-box">
                @if (Model.RecoverByEmail)
                {
                    <div class="layui-form-item">
                        <label class="input-prefix-icon layui-icon layui-icon-email" for="userEmail"></label>
                        <input type="text" name="@Model.NameOf(m => m.Email)" id="userEmail" placeholder="@Model.DisplayName(m => m.Email)" lay-verify="required|email" autocomplete="off" class="layui-input" />
                    </div>
                }
                else
                {
                    <div class="layui-form-item">
                        <label class="input-prefix-icon layui-icon layui-icon-cellphone" for="userMobile"></label>
                        <input type="text" name="@Model.NameOf(m => m.Mobile)" id="userMobile" placeholder="@Model.DisplayName(m => m.Mobile)" lay-verify="required|phone|number" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-row">
                            <div class="layui-col-xs7">
                                <label class="input-prefix-icon layui-icon layui-icon-vercode" for="smsCode"></label>
                                <input type="text" name="@Model.NameOf(m => m.SMSCode)" id="smsCode" lay-verify="required" placeholder="@Model.DisplayName(m => m.SMSCode)" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-col-xs5">
                                <div style="margin-left: 10px;">
                                    <button type="button" class="layui-btn layui-btn-primary layui-btn-fluid" id="getSmsCode">获取验证码</button>
                                </div>
                            </div>
                        </div>
                    </div>
                }

                @if (Model.DisplayCaptcha)
                {
                    <div class="layui-form-item">
                        <div class="layui-row imgCaptcha">
                            <div class="layui-col-xs7">
                                <label class="input-prefix-icon layui-icon layui-icon-auz" for="captchaAnswer"></label>
                                <input type="text" name="@Model.NameOf(m => m.CaptchaAnswer)" id="captchaAnswer" lay-verify="required" placeholder="@Model.DisplayName(m => m.CaptchaAnswer)" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-col-xs5">
                                <div style="margin-left: 10px;">
                                    <input type="text" name="@Model.NameOf(m => m.EncryptCaptcha)" value="" class="layui-hide" />
                                    <img src="/lib/PearAdminLayui/admin/images/captcha.gif" class="codeImage" />
                                </div>
                            </div>
                        </div>
                    </div>
                }

                <input type="text" class="layui-hide" name="@Model.NameOf(m => m.DisplayCaptcha)" value="@Model.DisplayCaptcha.ToString()" />
                <input type="text" class="layui-hide" name="@Model.NameOf(m => m.RecoverByEmail)" value="@Model.RecoverByEmail.ToString()" />
                <div class="layui-form-item">
                    <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm passwordrecover" lay-submit="" lay-filter="passwordRecover">
                        <i class="layui-icon layui-icon-ok"></i>
                        提交
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<script id="validateResultTpl" type="text/html">
    <ul class="validateResult">
        {{#  layui.each(d.Errors, function(index, item){ }}
        <li>
            <span>{{index + 1}} : {{item.ErrorDescription}}</span>
        </li>
        {{#  }); }}
    </ul>
</script>
@section Scripts{
    <script src="~/lib/PearAdminLayui/component/layui/layui.js"></script>
    <script src="~/lib/PearAdminLayui/component/pear/pear.js"></script>
    <script src="~/dist/js/utils/frontendapiconfig.min.js" asp-append-version="true"></script>
    <script>
        layui.use(['form', 'jquery', 'http', 'button', 'laytpl'], function () {
            var form = layui.form,
                $ = layui.jquery,
                button = layui.button,
                http = layui.http,
                laytpl = layui.laytpl;

            function pageInit() {
                var $captchaModule = $(".imgCaptcha");
                if ($captchaModule.length > 0) {
                    getCaptchData(130, 38);
                    $captchaModule.find("img.codeImage").on("click", function () {
                        getCaptchData(130, 38);
                    });
                }
                
                function getCaptchData(imgw, imgh) {
                    http.get(frontendapiConfig.getcaptcha,
                        { imgwidth: imgw, imgheight: imgh }
                    ).done(function (response) {
                        if (response.state && response.state === 200) {
                            $("input[name=CaptchaAnswer]").val("");
                            $("input[name=EncryptCaptcha]").val(response.data.Answer);
                            $("img.codeImage").attr('src', response.data.CaptchBase64Data);
                        }
                    }).fail(function (error) {
                        http.ajax.logError(error);
                    });
                }
            };

            pageInit();

            form.on('submit(passwordRecover)', function (data) {
                var loadbtn = null,
                    modelData = data.field;

                $('.layui-input').removeAttr('failure');
                http.post(frontendapiConfig.customerPasswordRecover,
                    modelData,
                    function () { //beforeSend
                        loadbtn = button.load({
                            elem: '.passwordrecover',
                            time: 10000
                        });
                    }
                ).done(function (response) {
                    if (response.state && response.state === 200) {
                        layer.alert(response.message, {
                            title: "提交通过验证",
                            icon: 1,
                            closeBtn: 0,
                            end: function () {
                                http.ajax.handleTargetUrl(response.data.returnUrl);
                            }
                        });
                    }
                }).fail(function (error) {
                    //For ModelValidation
                    if (error.status && error.status === 400) {
                        var validator = error.responseJSON;
                        if (validator.ErrorCode && validator.ErrorCode === "FluentValidationError") {
                            var validateTpl = document.getElementById('validateResultTpl').innerHTML;
                            laytpl(validateTpl).render(validator, function (html) {
                                http.ajax.showError({
                                    message: '提示信息',
                                    details: html
                                });
                            });
                            //标红校验错误的数据框
                            layui.each(validator.Errors, function (index, item) {
                                var inputField = item.ErrorField;
                                $("input[name=" + inputField + "]").attr('failure', '');
                            });
                        }
                    }
                }).always(function () {
                    loadbtn.stop(function () { });
                });

                return false;
            });
        });
    </script>

}
